<template>
	<view>
		<view class="rechargebox">
			<view class="title">充值金额</view>
			<view class="money">
				<image mode="aspectFill" class="money-icon" src="../../static/usercenter/money-icon.png"></image>
				<input v-model="amount" class="money-text" type="number" placeholder="请输入金额" />
			</view>
			<view class="summary">
				<image class="summary-icon" src="../../static/usercenter/wxzf-icon.png"></image>
				<text>微信支付</text>
			</view>
		</view>
		<view class="btn">
			<button @click="charge">立即充值</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount:''
			}
		},
		onLoad() {
		
		},
		methods: {
			
			charge(){
				if(this.amount == ''){
					this.$util.$showToast('请输入充值金额', '', 'none');
					return;
				}
				let param = {
					amount:this.amount,
				}
				let that = this;
				this.$api.charge(param).then(res => {
				
					if (res.code == 1) {
						
						that.wechatPay(res.data.payInfo);
						
					} else {
						this.$util.$showToast(res.msg, '', 'none');
				
					}
				})
			},
			wechatPay(payConfig) {
			
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.timeStamp,
					nonceStr: payConfig.nonceStr,
					package: payConfig.package,
					signType: payConfig.signType,
					paySign: payConfig.paySign,
					success: function(res) {
			
						uni.navigateBack({
							delta:1
						})
					},
					fail: function(err) {}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.rechargebox {
		background: #FFFFFF;
		margin: 40rpx;
		padding: 40rpx 27rpx;
		.title {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 40rpx;
		}
		.money {
			display: flex;
			padding-bottom: 37rpx;
			border-bottom: 1rpx solid #EFEFEF;
			.money-icon {
				width: 33rpx;
				height: 40rpx;
			}

			.money-text {
				margin-left: 20rpx;
			}
		}

		.summary {
			margin-top: 30rpx;
			.summary-icon {
				width: 35rpx;
				height: 31rpx;
			}
			text{
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.btn {
		button {
			background: #37C2BC;
			color: #ffffff;
			width: 670rpx;
			margin-top: 70rpx;
			margin-left: 25rpx;
		}
	}
</style>
